/* 引入字体 */
@font-face {
    font-family: flappy bird;
    src: url(fonts/FB.eot);
    src: url(fonts/FB.eot?#iefix) format("embedded-opentype"), url(fonts/FB.woff) format("woff"), url(fonts/FB.ttf) format("truetype"), url(fonts/FB.svg#04b_19regular) format("svg");
    font-weight: 400;
    font-style: normal
}


/* 游戏盒子 */
#game_box {
    /* 设置宽度 */
    width: 480px;
    /* 设置高度 */
    height: 640px;
    /* 设置居中 */
    margin: 20px auto;
    /* 设置边框 */
    border: 1px solid black;
    /* 设置背景图片 */
    background-image: url(../images/background.png);
    /* 子绝父相 */
    position: relative;
    /* 溢出盒子的内容隐藏 */
    overflow: hidden;
}

/* 大地 */
#land {
    /* 设置宽度 */
    width: 480px;
    /* 设置高度 */
    height: 80px;
    /* 绝对定位 */
    position: absolute;
    /* 贴左边 */
    left: 0;
    /* 贴下边 */
    bottom: 0;
    /* 背景图片 */
    background-image: url(../images/ground.png);
}

/* 小鸟 */
#bird {
    /* 绝对定位 */
    position: absolute;
    /* 设置垂直的定位 */
    top: 200px;
    /* 设置水平的定位 */
    left: 170px;
    /* 宽度 */
    width: 57px;
    /* 高度 */
    height: 40px;
    /* 背景 */
    background-image: url(../images/bird.png);
    /* 背景定位，使用精灵 */
    background-position: -200% 0;
}

/* 管子1的上管子 */
#pipe1_up {
    width: 88px;
    height: 300px;
    background-image: url(../images/pipe_up.png);
    /* 显示图片的最底部 */
    background-position: bottom left;
    position: absolute;
    left: 480px;
    top: 0;
}

/* 管子1的下管子 */
#pipe1_down {
    width: 88px;
    height: 60px;
    background-image: url(../images/pipe_down.png);
    position: absolute;
    left: 480px;
    top: 500px;
}

/* 管子2的上管子 */
#pipe2_up {
    width: 88px;
    height: 200px;
    background-image: url(../images/pipe_up.png);
    /* 显示图片的最底部 */
    background-position: bottom left;
    position: absolute;
    left: 880px;
    top: 0;
}

/* 管子2的下管子 */
#pipe2_down {
    width: 88px;
    height: 160px;
    background-image: url(../images/pipe_down.png);
    position: absolute;
    left: 880px;
    top: 400px;
}

/* 遮罩盒子 */
#cover {
    /* 绝对定位 */
    position: absolute;
    /* top值，就是距离上边的距离 */
    top: 0;
    /* left值，就是距离左边的距离 */
    left: 0;
    /* 宽度是父盒子的100% */
    width: 100%;
    /* 高度是父盒子的100% */
    height: 100%;
    /* 背景颜色，由于是渐变色，CSS规定必须是background-image而不是background-color */
    background-image: -webkit-radial-gradient(center center, rgba(168, 168, 168, 0.253),
            rgb(230, 230, 230));
    /* 不出现，纯透明 */
    opacity: 0;
    /* 过渡 */
    transition: all .4s linear 0s;
}

/* 重玩按钮 */
#restart {
    /* 绝对定位 */
    position: absolute;
    /* 宽度 */
    width: 107px;
    /* 高度 */
    height: 37.5px;
    /* 居中 */
    left: 50%;
    /* 拉回自己的宽度的一半 */
    margin-left: -53.5px;
    /* 设置一个超过屏幕高度的top值，这样一开始看不见这个按钮，可以让这个按钮从下面出现 */
    top: 800px;
    /* 设置堆叠顺序 */
    z-index: 999;
    /* 鼠标碰上去是小手 */
    cursor: pointer;
    /* 背景图片 */
    background: url(../images/restart.png);
    /* 背景尺寸 */
    background-size: 100% 100%;
    /* 过渡 */
    transition: all 1s;
}

/* 分数 */
#score_box {
    /* 设置字体为flappy bird专属字体 */
    font-family: 'flappy bird';
    /* 字号 */
    font-size: 50px;
    /* 不加粗 */
    font-weight: normal;
    /* 颜色 */
    color: white;
    /* 相对定位，设置相对定位的目的是：只有相对定位了，才能设置z-index属性值 */
    position: relative;
    /* 设置堆叠顺序 */
    z-index: 9999;
    /* 文字阴影 */
    text-shadow: 2px 2px 2px black;
    /* 居中 */
    text-align: center;
    /* 上外边距 */
    margin-top: 80px;
    /* 文本不能被选中 */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}